<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性</title>
    <script src="../../js/plugin/jquery-2.0.3.js"></script>
    <script src="../../node_modules/loadsh/lodash.min.js"></script>
    <script src="../../js/plugin/ztreev3/js/jquery.ztree.all.min.js"></script>
    <script src="../../node_modules/vue/dist/vue.js"></script>
    <script src="../../node_modules/element-ui/lib/index.js"></script>
    <script src="../../js/html/eventName.js"></script>
    <link rel="stylesheet" href="../../css/html/layers/layers.css"/>
    <link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css"/>
    <link rel="stylesheet" href="../../js/plugin/ztreev3/css/bootstrapStyle/bootstrapStyle.css"/>
    <link rel="stylesheet" href="../../node_modules/Scrollbar/jquery.mCustomScrollbar.css" />
<!--    <style>-->
<!--        @import url(../css/html/app.css);-->
<!--        @import url(../css/html/layers/editLayer.css);-->
<!--        @import url(../node_modules/element-ui/lib/theme-chalk/index.css);-->
<!--    </style>-->
</head>

<body>

    <div id="app" class="point-container">
        <div class="tab-container">
            <!--图层类型-->
            <table class="layercsstable  ">
                <tr>
                    <th colspan="2">图层类型</th>
                </tr>
                <tr>
                    <td>类型：</td>
                    <td>
                        <el-select v-model="layertype" placeholder="请选择" @change="chagelayerType">
                            <el-option v-for="item in layertypes" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </td>
                </tr>
            </table>

            <!--圆-->
            <table class="layercsstable pointLayer">
                <tr>
                    <th colspan="2">-外观</th>
                </tr>
                <tr>
                    <!--<td>颜色</td><td><colorPicker v-model="pointColor" />-->
                    <td>颜色</td>
                    <td>
                        <el-color-picker v-model="pointColor" size="mini" show-alpha :predefine="predefineColors">
                        </el-color-picker>
                    </td>
                </tr>
                <tr>
                    <td>边框颜色</td>
                    <td>
                        <el-color-picker v-model="pointOutlineColor" size="mini" show-alpha
                            :predefine="predefineColors"></el-color-picker>
                    </td>
                </tr>
                <tr>
                    <td>边框宽度</td>
                    <td>
                        <el-input v-model="pointOutlineWidth"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>比例</td>
                    <td>
                        <el-input v-model="pointPixelSize"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>高度</td>
                    <td>
                        <el-input v-model="pointHeight"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>高度类型</td>
                    <td>
                        <el-select v-model="heightReference" placeholder="请选择">
                            <el-option v-for="item in heightReferences" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>最大可视距离</td>
                    <td>
                        <el-input v-model="pointDistanceDisplayMaxCondition"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>最小可视距离</td>
                    <td>
                        <el-input v-model="pointDistanceDisplayMinCondition"></el-input>
                    </td>
                </tr>
            </table>

            <!--label-->
            <table class="layercsstable labelLayer">
                <tr>
                    <th colspan="2">-外观</th>
                </tr>
                <tr>
                    <td>文本</td>
                    <td>
                        <el-input v-model="labelText" style="width: 70%;"></el-input>
                        <el-select v-model="labelText1" placeholder="请选择" style="width: 20%;">
                            <el-option v-for="item in labelText1s" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>样式</td>
                    <td>
                        <el-select v-model="labelStyles" placeholder="请选择">
                            <el-option v-for="item in labelStyless" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>文本颜色</td>
                    <td>
                        <el-color-picker v-model="labelFillColor" size="mini" show-alpha :predefine="predefineColors" />
                    </td>
                </tr>
                <tr>
                    <td>文本边框颜色</td>
                    <td>
                        <el-color-picker v-model="labelOutlineColor" size="mini" show-alpha
                            :predefine="predefineColors" />
                    </td>
                </tr>
                <tr>
                    <td>文本边框宽度</td>
                    <td>
                        <el-input v-model="labelOutlineWidth"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>文本大小</td>
                    <td>
                        <el-input v-model="labelFontSize"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>显示背景</td>
                    <td>
                        <el-switch v-model="labelBackground" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </td>
                </tr>
                <tr>
                    <td>背景色</td>
                    <td>
                        <el-color-picker v-model="labelBackgroundColor" size="mini" show-alpha
                            :predefine="predefineColors" />
                    </td>
                </tr>
                <tr>
                    <td>水平</td>
                    <td>
                        <el-select v-model="labelHorizontalOrigin" placeholder="请选择">
                            <el-option v-for="item in horizontalOrigins" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>垂直</td>
                    <td>
                        <el-select v-model="labelVerticalOrigin" placeholder="请选择">
                            <el-option v-for="item in verticalOrigins" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>高度</td>
                    <td>
                        <el-input v-model="labelHeight"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>高度类型</td>
                    <td>
                        <el-select v-model="heightReference" placeholder="请选择">
                            <el-option v-for="item in heightReferences" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>最大可视距离</td>
                    <td>
                        <el-input v-model="labelDistanceDisplayMaxCondition"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>最小可视距离</td>
                    <td>
                        <el-input v-model="labelDistanceDisplayMinCondition"></el-input>
                    </td>
                </tr>
            </table>

            <!--billboard-->
            <table class="layercsstable billboardLayer">
                <tr>
                    <th colspan="2">-外观</th>
                </tr>
                <tr>
                    <td>图片</td>
                    <td>
                        <el-input v-model="billboardImage"></el-input>
                        <!--<el-row>style="width: 75% ; float: left;"-->
                        <!--<el-button type="primary" icon="el-icon-upload" circle  @click="billboardImageC"></el-button>-->
                        <!--</el-row>-->
                        <input type="file" id="files" style="display: none" @change="fileInputExp">
                    </td>
                </tr>
                <tr>
                    <td>颜色</td>
                    <td>
                        <el-color-picker v-model="billboardColor" size="mini" show-alpha :predefine="predefineColors" />
                    </td>
                </tr>
                <tr>
                    <td>比例</td>
                    <td>
                        <el-input v-model="billboardScale"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>宽度</td>
                    <td>
                        <el-input v-model="billboardWidth"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>高度</td>
                    <td>
                        <el-input v-model="billboardPHeight"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>高度类型</td>
                    <td>
                        <el-select v-model="billboardHeightReference" placeholder="请选择">
                            <el-option v-for="item in heightReferences" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>最大可视距离</td>
                    <td>
                        <el-input v-model="billboardDistanceDisplayMaxCondition"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>最小可视距离</td>
                    <td>
                        <el-input v-model="billboardDistanceDisplayMinCondition"></el-input>
                    </td>
                </tr>
            </table>

            <!--model样式及属性-->
            <table class="layercsstable modelLayer">
                <tr>
                    <th colspan="2">-外观</th>
                </tr>
                <tr>
                    <td>模型路径</td>
                    <td>
                        <el-input v-model="modelUri"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>模型比例</td>
                    <td>
                        <el-input v-model="modelScale"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>颜色</td>
                    <td>
                        <el-color-picker v-model="modelColor" size="mini" show-alpha :predefine="predefineColors" />
                    </td>
                </tr>
                <tr>
                    <td>光亮颜色</td>
                    <td>
                        <el-color-picker v-model="modelLightColor" size="mini" show-alpha
                            :predefine="predefineColors" />
                    </td>
                </tr>
                <tr>
                    <td>高度</td>
                    <td>
                        <el-input v-model="modelHeight"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>高度类型</td>
                    <td>
                        <el-select v-model="modelHeightReference" placeholder="请选择">
                            <el-option v-for="item in heightReferences" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>最大可视距离</td>
                    <td>
                        <el-input v-model="modelDistanceDisplayMaxCondition"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>最小可视距离</td>
                    <td>
                        <el-input v-model="modelDistanceDisplayMinCondition"></el-input>
                    </td>
                </tr>
            </table>

            <!--线的样式及属性-->
            <table class="layercsstable polylineLayer">
                <tr>
                    <th colspan="2">-外观</th>
                </tr>
                <tr>
                    <td>填充色</td>
                    <td>
                        <el-color-picker v-model="polylinemMterial" size="mini" show-alpha
                            :predefine="predefineColors" />
                    </td>
                </tr>
                <tr>
                    <td>线型</td>
                    <td>
                        <el-input v-model="polylinemArcType"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>线宽</td>
                    <td>
                        <el-input v-model="polylineWidth"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>最大可视距离</td>
                    <td>
                        <el-input v-model="polylineDistanceDisplayMaxCondition"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>最小可视距离</td>
                    <td>
                        <el-input v-model="polylineDistanceDisplayMinCondition"></el-input>
                    </td>
                </tr>
            </table>

            <!--面的样式及属性-->
            <table class="layercsstable polygonLayer">
                <tr>
                    <th colspan="2">-外观</th>
                </tr>
                <tr>
                    <td>填充色</td>
                    <td>
                        <el-switch v-model="polygonFill" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </td>
                </tr>
                <tr>
                    <td>材质</td>
                    <td>
                        <el-color-picker v-model="polygonMaterial" size="mini" show-alpha :predefine="predefineColors">
                        </el-color-picker>
                    </td>
                </tr>
                <tr>
                    <td>显示边框</td>
                    <td>
                        <el-switch v-model="polygonOutline" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </td>
                </tr>
                <tr>
                    <td>边框颜色</td>
                    <td>
                        <el-color-picker v-model="polygonOutlineColor" size="mini" show-alpha
                            :predefine="predefineColors" />
                    </td>
                </tr>
                <tr>
                    <td>边框宽度</td>
                    <td>
                        <el-input v-model="polygonOutlineWidth"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>高度</td>
                    <td>
                        <el-input v-model="polygonHeight"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>高度类型</td>
                    <td>
                        <el-select v-model="polygonHeightReference" placeholder="请选择">
                            <el-option v-for="item in heightReferences" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>拉伸高度</td>
                    <td>
                        <el-input v-model="polygonExtrudedHeight"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>拉伸高度类型</td>
                    <td>
                        <el-select v-model="polygonExtrudedHeightReference" placeholder="请选择">
                            <el-option v-for="item in heightReferences" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>最大可视距离</td>
                    <td>
                        <el-input v-model="polygonDistanceDisplayMaxCondition"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>最小可视距离</td>
                    <td>
                        <el-input v-model="polygonDistanceDisplayMinCondition"></el-input>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
<script src="../../node_modules/Scrollbar/jquery.mCustomScrollbar.js"></script>
<script src="../../js/html/scrollbarStart.js"></script>
<script src="../../js/Layers/editLayer.js"></script>

</html>